<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 视口 适配移动端  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>媒体查询体验</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        body {
            background-color: red;
        }
        /* 媒体查询：检查设备宽度，来修改 样式的 */
        /* w<768px  blue; max-width: 768px 意思：最大宽度是768px，也就是说 要小于等于768px */
        @media screen and (max-width: 768px){
            body {
                background-color: blue;
            }
        }
        /* min-width: 768px 意思：最小值是768px,翻译：就是要大于等于768px */
        /* max-width: 992px 意思：最大是值992px,翻译：就要小于992px */
        @media screen and (min-width: 768px) and (max-width: 992px){
            body {
                background-color: green;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            body {
                background-color: pink;
            }
        }
        @media screen and (min-width: 1200px){
            body {
                background-color: purple;
            }
        }

    </style>
</head>
<body>
    <!-- 
        需求：
        body  默认背景色 red
        w<768px  blue
        w:768px~992px green
        w:992px ~ 1200px  pink
        w>1200px  purple
     -->

     <!-- 
         一个数值即有最大也有最小
         最小值：min 包含
         最大值：max 不包含
      -->
    
</body>
</html>